import { Button, Form, Input } from 'antd';
import React from 'react';

interface IProps {
  onSearch: (values: any) => void;
  onCreate: () => void;
}

const TableHeader = (props: IProps) => {
  const { onCreate, onSearch } = props;
  const [form] = Form.useForm();

  const onReset = () => {
    form.resetFields();
    onSearch({});
  };

  return (
    <Form form={form} layout="inline" onFinish={onSearch}>
      <Form.Item name="name">
        <Input placeholder="名称" />
      </Form.Item>
      <Form.Item name="type">
        <Input placeholder="类别" />
      </Form.Item>
      <Form.Item name="description">
        <Input placeholder="描述" />
      </Form.Item>
      <Form.Item>
        <Button type="primary" onClick={() => form.submit()}>
          查询
        </Button>
      </Form.Item>
      <Form.Item>
        <Button onClick={onReset}>重置</Button>
      </Form.Item>
      <Form.Item>
        <Button type="primary" onClick={onCreate}>
          创建
        </Button>
      </Form.Item>
    </Form>
  );
};

export default TableHeader;
